<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <link rel="stylesheet" href="../css/article.css" />
    <link rel="stylesheet" href="../css/wangEditor.min.css" />
    <script src="../js/wangEditor.min.js"></script>
    <title>文章</title>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header">Thinking</div>
                <form class="layui-form layui-card-body" action="">
                  <div class="layui-form-item">
                    <label class="layui-form-label">文章标题</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">标签</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" required  lay-verify="required" placeholder="输入自定义的标签" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">文章内容</label>
                    <div class="layui-input-block">
                      <div id="editor"></div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn layui-btn-blue" lay-submit lay-filter="formDemo">立即提交</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                  </div>
                </form>  
            </div>
        </div>
    </div>
    <script src="../assets/layui.all.js"></script>
    <script>
      	var form = layui.form
        ,layer = layui.layer;
	    var E = window.wangEditor;
		var editor = new E('#editor');
		/* 处理上传图片的controller路径 */
		editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
		/* 定义上传图片的默认名字 */
		editor.customConfig.uploadFileName = 'myFileName';
		// 或者 var editor = new E( document.getElementById('editor') )
		editor.customConfig.emotions = [
	        {
	            // tab 的标题
	            title: '默认',
	            // type -> 'emoji' / 'image'
	            type: 'image',
	            // content -> 数组
	            content: [
	                {
	                    alt: '[坏笑]',
	                    src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
	                },
	                {
	                    alt: '[舔屏]',
	                    src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
	                },
	                {
	                    alt: '[二哈]',
	                    src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/22/2018new_erha_org.png'
	                },
	                {
	                    alt: '[喵喵]',
	                    src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/7b/2018new_miaomiao_thumb.png'
	                },
	                {
	                    alt: '[神烦狗]',
	                    src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a1/2018new_doge02_org.png'
	                },
	            ]
	        },
	        {
	            // tab 的标题
	            title: 'emoji',
	            // type -> 'emoji' / 'image'
	            type: 'emoji',
	            // content -> 数组
	            content: ['😀', '😃', '😄', '😁', '😆']
	        }
	    ];
		editor.create();
    </script>
    <script src="../js/jquery-3.3.1.js"></script>
    <script>
    	$('.w-e-icon-image').click(function(){
    		layer.tips("网络图片也可以通过<a href='https://imgchr.com' target='_blank' style='color:rgb(1, 169, 242)'>图床</a>或者<a href='https://sm.ms/' target='_blank' style='color:rgb(1, 169, 242)'>SM.MS</a>或<a href='https://www.jianshu.com/' target='_blank' style='color:rgb(1, 169, 242)'>简书</a>来上传哦,你懂得~", '.w-e-icon-image', {
			  tips: 3,
			  time:5000
			});
    	});
    </script>
</body>
</html>